<#include "../common/scripts.html">

<style type="text/css">
    .content {
        width: auto;
        height: auto;
        background-color: #fff;
        overflow: visible;
        padding: 0px 10px 20px;
    }
    .page-content-s {
        margin: 10px 10px;
        overflow-y: scroll;
        width: 100%;
    }
    /*
     *表头禁止换行
     */
   /* .dataTable th {
        white-space: nowrap !important;
    }*/
    /* 设置dtable水平滚动 */
   /* .data-list>.dataTables_wrapper>.row:nth-child(1) {
        overflow-x: auto;
    }*/
    /*隐藏框架自带的上传按钮*/
    .dt-buttons{
        display:none;
    }
    /**dataTable 内容过长显示省略号**/
    table.dtable>thead>tr>th, table.dtable>tbody>tr>td {
        text-align: center;
        vertical-align: middle;
        padding: 0px 20px !important;
        white-space: nowrap;
        max-width: 400px;
    }
</style>
<div class="page-content-s">
    <div class="oper-search">
        <form class="form-inline" style="display:inline-block; margin-left:10px; padding-top: 10px;">
            <div class="form-group">
                <label for="companyName" class="control-label-query text-justify">所属公司<span class="span-justify"></span></label>
                <input type="text" id="companyName" class="input-sm form-control col-sm-5-8" name="companyName" value="" onclick="companyTree();"  placeholder="请选择所属公司" readonly/>
            </div>
            <div class="form-group">
                <label for="username" class="control-label-query text-justify">用户名<span class="span-justify"></span></label>
                <input type="text" id="username" class="input-sm form-control col-sm-5-8" name="username" value="" placeholder="请输入用户名" autocomplete="off"/>
            </div>
            <div class="form-group">
                <label for="name" class="control-label-query text-justify">姓名<span class="span-justify"></span></label>
                <input type="text" id="name" class="input-sm form-control col-sm-5-8" name="name" value="" placeholder="请输入姓名" autocomplete="off"/>
            </div>
            <div class="form-group">
                <span class="btn btn-sm glyphicon glyphicon-search" onclick="searchBtn()">查询</span>
                <#if shiro.hasPermission("user.add")>
                <span class="btn btn-sm glyphicon glyphicon-plus" onclick="add(this)" >新增</span>
                </#if>
                <#if shiro.hasPermission("user.delete")>
                <span class="btn btn-sm glyphicon glyphicon-trash" onclick="delById()">删除</span>
                </#if>
                <!--<span class="btn btn-sm glyphicon glyphicon-export" onclick="exportExcelBtn()">导出</span>-->
            </div>
            <input type="text" id="delFlag" name="delFlag" value="0" hidden>
        </form>
    </div>
    <div class="data-list content" style="padding-left: 0px;">
        <table class="dtable eamtable"></table>
    </div>
</div>
<script>
    function getSearchPara() {
        var companyName = $("#companyName").val().trim();
        var username = $("#username").val().trim();
        var name = $("#name").val().trim();
        var delFlag = $("#delFlag").val().trim();
        var param = 'companyName='+companyName+'&username='+username+'&name='+name+"&delFlag="+delFlag;
        return param;
    }

    function getSearchUrl(){
        var url = '${ctx}/user/ajaxPageInfo?' + getSearchPara();
        url = encodeURI(url);
        return url;
    }

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    var table = dataTable = $(".eamtable");
    $(function() {
        sys.useSimpleRetrieveData();
        var staticPrefix = "${static}";
        var config = sys.DynamicDatabeConfig(staticPrefix,getSearchUrl(), [
            {   data:null,
                title:"<div class='pretty success' style='margin: 0;'>"+
                    "<input type='checkbox' class='check-all' id='checkAllBtn' onclick='$.clickAllCheck(this)'>"+
                    "<label><i class='mdi mdi-check'></i></label></div>" ,
                render:function(data){
                    return getCheckBox(data.id);
                },width:20
            },
            {data : 'username',title:'用户名',
                render: function (data2, type, row, meta) {
                    return '<a style = "cursor: pointer;" onclick="showDetail(this,\'' + row.id + '\')">' + row.username + '</a>';
                }
            },
            {data : 'name',title:'姓名'},
            {data : 'userCode',title:'工号'},
            {data : 'companyName',title:'所属公司'},
            {   data : null,title:'操作',
                render : function(data) {
                    //console.log("data:"+data.id,data.delFlag)
                    return getOperHtml(data.id,data.delFlag);
                }
            },
        ],true, {ordering:true});
        config.scrollX = true;
        config.autoWidth=true;
        config.scrollY = $('body').height()-185;
        config.bSort=false;
        config.aLengthMenu = [10,20,50,100];
        dataTable.dataTable(config);
    })

    function searchBtn(){
        dataTable.api().ajax.url(getSearchUrl()).load(null, false).draw();
    }
    function getOperHtml(id){
        var  html = '';
             html += '<#if shiro.hasPermission("user.edit")><a  href="${ctx}/user/edit"  title="编辑用户管理" onclick="edit(this,\''+id+'\');return false;"><i class="fa fa-pencil iconBtn" style="color: rgb(105, 170, 70)"></i></a>&nbsp;&nbsp;</#if>';
        return html;
    }

    // 新增用户
    function add(obj) {
        var $this = $(obj);
        var url = "${ctx}/user/edit";
        js.addTabPage($this, '新增用户', url, true, true);
    }

    //详情
    function showDetail(obj, id) {
        stopPropagation();
        var url="${ctx}/user/detail?id="+id;
        js.addTabPage($(obj), '用户管理详情', url, true, true);
    }

    // 编辑
    function edit(obj,id) {
        var $this = $(obj);
        var url = $this.data("href") || $this.attr("href")+"?id="+id;
        var title = $this.data("title") || $this.attr("title");
        js.addTabPage($this,title,url,true,true);
    }
    //删除
    function delById(id) {
        var ids = getSelectIds();
        if(!ids || ids.length == 0){
            return ;
        }
        sys.confirm("确定删除该数据吗？", confirmdel);
        function confirmdel() {
            sys.getApiData("${ctx}/user/del", {
                ids : ids
            }, back, "post");
            function back(data) {
                if(data.success){
                    sys.topmsg(data.data);
                }else{
                    sys.topmsg(data.message);
                }
                dataTable.api().ajax.url(getSearchUrl()).load(null, false).draw();
            }
        }
    }
    function getCheckBox(id){
        return '<div class="pretty success" style="margin: 0;">'
            +'<input type="checkbox" data-id="'+id+'" onclick="$.clickCheckItem(this)"  class="item-checkbox" /> '
            +'  <label><i class="mdi mdi-check"></i></label>'
            +'</div>';
    }

    function reload() {
        dataTable.dataTable().api().draw();
    }
    function getSelectIds(){
        var ids = $.getCheckIds();
        if(!ids || ids.length == 0){
            sys.topmsg("至少勾选一项之后再操作！");
            return ;
        }
        return ids;
    }
    //获取上级公司
    function companyTree() {
        PullDownTree_obj.init("${ctx}/company/findCompanyIdTree",
            "#companyName", "", "#companyCode", false, "", "", function(treeId, treeNode) {
                if(treeNode.type=="1"){
                    $("#companyName").val(treeNode.name);
                }else{
                    $("#companyName").val("");
                }
                $("#ztree-container").hide();
                reload();
                return false;
            });
    }
</script>
